<template>
	<cl-page>
		<cl-confirm ref="Confirm"> </cl-confirm>
		<view class="p-20">
			<view class="min-w-full" v-for="(item,index) in list" :key="index" @click="jumpDetail(item)">
				<view class="cursor-pointer  flex-between">
					<view class="cursor-pointer-title">
						{{item.form.value0}}
					</view>
					<view class="flex">
						<view class="item-flex-img edit">
							<image src="@/static/edit.svg" mode="aspectFill"></image>
						</view>
						<view class="item-flex-img delete"  @click.stop="deleteList(item.id,index)">
							<image src="@/static/delete-1.svg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="text-neutral flex-between">
					<view class="">
						{{item.functionName}}
					</view>
					<view class="">
						{{item.updateTime}}
					</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script setup lang="ts">
	import {
		onReady
	} from "@dcloudio/uni-app";
	import {
		nextTick,
		ref
	} from "vue";
	import {
		useApp,
		usePager,
		useCool,
		router
	} from "/@/cool";
	import {
		useUi
	} from "/@/ui";
	const app = useApp();
	const ui = useUi();
	const { service } = useCool();
	const { pager, Loading, Finished, Loadmore, list, onData, onRefresh } = usePager();
	const Confirm = ref<ClConfirm.Ref>();
	function jumpDetail(item){
		router.push({
			path: "/pages/index/topic/topic",
			query: {
				id: item.functionId,
				projectsId:item.id
			},
		});
	}
	function deleteList(id,index) {
		Confirm.value?.open({
			title: "提示",
			message: "确定要删除吗?",
			callback(action) {
				switch (action) {
					case "confirm":
					service.inktok.chatlog.delete({ids:[id]}).then(res=>{
						list.value.splice(index,1)
						ui.showToast("删除成功");
					})
						break;
	
					case "cancel":
						ui.showToast("已取消");
						break;
	
					case "close":
						ui.showToast("已关闭");
						break;
				}
			},
		});
	}
	function refresh(params ?: any) {
		// 获取值
		const { data, next } = onRefresh(params);
		// 绑定对应的服务
		next(service.inktok.chatlog.page(data).then(res=>{
			res.list.forEach(item=>{
				item.form=JSON.parse(item.form)
			})
			return res
		}));
	}
	// 首次刷新
	onReady(() => {
		refresh();
	})
	defineExpose({
		refresh
	});
</script>

<style scoped lang="scss">
	.min-w-full {
		background-color: rgb(255 255 255);
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		border: 1px solid rgb(243 244 246);
		border-radius: 0.25rem;
		margin-bottom: 0.5rem;

		.cursor-pointer {
			padding-left: 1rem;
			padding-right: 1rem;
			padding-bottom: 1.5rem;
		}

		.flex {
			display: flex;
			align-items: center;
		}

		.cursor-pointer-title {
			flex: 1;
			white-space: nowrap;
			margin-right: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			color: rgb(65 67 87);
			font-size: .875rem;
		}

		.flex-between {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.item-flex-img {
			margin-left: 30rpx;
			width: 48rpx;
			height: 48rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.delete {}

		.text-neutral {
			padding-left: 1rem;
			padding-right: 1rem;
			font-size: .875rem;
			color: rgb(178 179 189);
		}
	}
</style>